<!-- 我的房产使用 -->
<template>
	<zh-app style="font-family: '阿里巴巴普惠体'">
		<!-- 导航栏 -->
		<zh-navbar title="我的房产使用" color="#85a5ff" linear="right" />
		<zh-filterMenu>
			<!-- 年度 -->
			<zh-filterMenu-item isButton :title="data.year + '年'" un-icon="" icon="tmicon-menu"> </zh-filterMenu-item>
			<!-- 统筹区 -->
			<zh-filterMenu-item :title="data.areaName">
				<view
					hover-class="opactiy-7"
					v-for="(item, index) in data.areaCodeDict"
					:key="index"
					@tap="onSelectArea(item)"
					class="flex-1 flex-row flex flex-row-center-between"
					style="height: 76rpx"
				>
					<zh-text :color="item.dictKey === data.areaCode ? 'primary' : ''" :label="item.dictValue" />
					<tm-icon :font-size="24" color="primary" v-if="item.dictKey === data.areaCode" name="tmicon-check" />
				</view>
			</zh-filterMenu-item>
		</zh-filterMenu>
		<!-- 提示语 -->
		<zh-sheet :round="5" color="#d8efff" :padding="[10, 20]">
			<zh-text style="text-indent: 2em; padding-bottom: 10rpx" label="本列表下房产已用于入学报名;"></zh-text>
			<zh-text
				style="text-indent: 2em; padding-bottom: 10rpx"
				color="blue"
				label="三年内无法用于另一户家庭孩子入学报名;"
			></zh-text>
			<zh-text
				style="text-indent: 2em; padding-bottom: 10rpx"
				label="凭房产入学报名进入民办学校就读的，房产视同已使用。"
			></zh-text>
		</zh-sheet>
		<zh-spin :load="data.loading" tip="信息加载中，请耐心等候">
			<zh-sheet v-if="!data.houseUseArr || data.houseUseArr.length <= 0" :margin="[30, 0, 30, 30]">
				<zh-result title="未使用" subTitle="您家庭的房产没有3年内入学使用记录" :showBtn="false"></zh-result>
			</zh-sheet>
			<!-- 主体 -->
			<zh-sheet v-for="(house, index) in data.houseUseArr" :key="house.houseId" :round="5" :margin="[30, 0, 30, 30]">
				<zh-card :title="'房产信息' + (index + 1)" :round="0" :margin="[0, 0]" :padding="[0, 0]">
					<template v-slot:status>
						<view class="flex">
							<tm-icon
								:name="data.hiddenFlag ? 'tmicon-eye-slash' : 'tmicon-eye'"
								style="margin: 0 10rpx"
								@tap="changeSensitive"
							></tm-icon>
						</view>
					</template>
					<template v-slot:content>
						<zh-form :padding="[0, 0]" :margin="[0, 0]" :transprent="true">
							<zh-form-item label="不动产证号" :border="false">
								<zh-text :label="house.realProperty"></zh-text>
							</zh-form-item>
							<zh-form-item label="单元号" :border="false">
								<zh-text :label="house.realPropertyNum"></zh-text>
							</zh-form-item>
							<zh-form-item label="坐落" :border="false">
								<zh-text :label="house.address"></zh-text>
							</zh-form-item>
						</zh-form>
					</template>
				</zh-card>
				<zh-card
					title="使用情况"
					:round="0"
					:margin="[0, 0]"
					:padding="[0, 0]"
					v-for="(item, index) in house.houseUsageRecordVOList"
					:key="index"
				>
					<template v-slot:content>
						<zh-form :padding="[0, 0]" :margin="[0, 0]" align="right" :transprent="true">
							<zh-form-item label="使用年份" :border="false">
								<zh-text :label="item.year"></zh-text>
							</zh-form-item>
							<zh-form-item label="报名学校" :border="false">
								<zh-text :label="item.schoolName"></zh-text>
							</zh-form-item>
							<zh-form-item label="入学学生" :border="false">
								<zh-text :label="item.studentName"></zh-text>
							</zh-form-item>
						</zh-form>
					</template>
				</zh-card>
				<zh-button
					form-type="submit"
					label="申诉"
					:fontSize="32"
					:height="70"
					style="background-image: linear-gradient(to right, #85a5ff, #2f54eb)"
					block
					@tap="submit(house.houseId)"
				></zh-button>
			</zh-sheet>
		</zh-spin>
		<zlb-footer></zlb-footer>
	</zh-app>
</template>
<script lang="ts" setup>
	import { ref, reactive } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'

	// ------------------接收传入参数(组件)-------------------

	// ------------------变量区------------------------------
	// 主数据
	const data = reactive({
		loading: false,
		year: new Date().getFullYear(),
		areaCode: '',
		areaName: '报名区县',
		operation: { title: '不能办理该业务', subTitle: '本年度招生工作尚未开始' },
		areaCodeDict: [] as Array<any>,
		// 是否脱敏标记
		hiddenFlag: true,
		// 房产使用数组
		houseUseArr: [] as Array<any>,
	})

	// ------------------方法区------------------------------
	//获取可选行政区划
	const getAreaCode = () => {
		data.loading = true
		$api.common.send
			.post('dict0028', {})
			.then((res: any) => {
				data.areaCodeDict = res.result || []
				if (data.areaCodeDict.length >= 1) {
					data.areaCode = data.areaCodeDict[0].dictKey
					data.areaName = data.areaCodeDict[0].dictValue
					findList()
				}
			})
			.catch(() => {
				data.loading = false
			})
	}
	//选择行政区划
	const onSelectArea = async (item: any) => {
		data.areaCode = item.dictKey
		data.areaName = item.dictValue
		findList()
	}
	const findList = () => {
		data.loading = true
		let params = { areaCode: data.areaCode, hiddenFlag: data.hiddenFlag }
		$api.common.send
			.post('eduStudentHouse0009', params)
			.then((res: any) => {
				data.houseUseArr = res.result
				data.loading = false
			})
			.catch(() => {
				data.loading = false
			})
	}
	// 提交申诉
	const submit = (houseId: string) => {
		const query = { id: houseId, type: '' }
		$router.replace('/pages/edu/appeal/appeal', query)
	}
	// 切换脱敏
	const changeSensitive = () => {
		data.hiddenFlag = !data.hiddenFlag
		findList()
	}

	// ------------------钩子函数----------------------------
	// 初始化
	onLoad((options: any) => {
		if (options.areaCode) {
			data.areaCode = options.areaCode
		}
		getAreaCode()
	})
</script>
<style lang="scss" scoped></style>
